@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline" style="margin-right: 0px;">
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" class="layui-input" placeholder="开始时间" name="start_time" id="start_time" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-mid layui-word-aux" style="display: inline;margin-right: 5px">-</div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="结束时间" name="end_time" id="end_time" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="out_trade_no" id="out_trade_no" placeholder="请输入支付单号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="status" lay-verify="required" id="status">
                            <option value="">请选择状态</option>
                            @foreach($status as $k => $v)
                            <option value="{{$k}}">{{$v}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="searchBtn">搜 索</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>

            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('freight.fee.refund')
                        <a class="layui-btn layui-btn-sm" lay-event="refund">退款</a>
                    @endcan
                </div>
            </script>

            <script type="text/html" id="order">
                @{{ d.order ? (d.order.order_no ? d.order.order_no : '') : ''}}
            </script>
            <script type="text/html" id="driver">
                @{{ d.driver ? (d.driver.name ? d.driver.name : d.driver.phone) : ''}}
            </script>
            <script type="text/html" id="fee">
                @{{ d.total_fee/100 }}
            </script>
        </div>
    </div>
@endsection

@section('script')
    @can('freight.order')
        <script>
            layui.use(['layer', 'table', 'form', 'laydate'], function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                var laydate = layui.laydate;
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    , height: 500
                    , url: "{{ route('admin.fee.data') }}" //数据接口
                    , page: true //开启分页
                    , cols: [[ //表头
                        {checkbox: true, fixed: true}
                        , {field: 'out_trade_no', title: '商户单号', width: 160, fixed: 'left'}
                        , {field: 'id', title: 'ID', sort: true, width: 60}
                        , {field: 'order', title: '货源单号', width: 180, toolbar: '#order'}
                        , {field: 'driver', title: '司机', width: 150, toolbar: '#driver'}
                        , {
                            field: 'payment', title: '支付方式', width: 100, templet: function (d) {
                                if (d.payment == 1) {
                                    return '支付宝';
                                } else {
                                    return '微信';
                                }
                            }
                        }
                        , {field: 'total_fee', title: '支付金额(元)', toolbar: '#fee', width: 150}
                        , {field: 'pay_desc', title: '支付状态', width: 150}
                        , {field: 'out_refund_no', title: '退款单号', width: 150}
                        , {field: 'created_at', title: '创建时间', width: 180}
                        , {field: 'updated_at', title: '更新时间', width: 180}
//                        , {fixed: 'right', align: 'center', toolbar: '#options', width: 100}
                    ]]
                });

                //搜索
                laydate.render({
                    elem: "#start_time",
                    trigger: 'click',
                });
                laydate.render({
                    elem: "#end_time",
                    trigger: 'click',
                });
                $("#searchBtn").click(function () {
                    var start_time = $("#start_time").val();
                    var end_time = $("#end_time").val();
                    var out_trade_no = $("#out_trade_no").val();
                    var status = $("#status").val();
                    dataTable.reload({
                        where: {start_time: start_time, end_time: end_time, out_trade_no: out_trade_no, status:status},
                        page: {curr: 1}
                    })
                })
            })
        </script>
    @endcan
@endsection